<template>
  <div class="health-monitoring-container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="sidebar-title">体征监测</div>
      <div class="nav-item active">
        <i class="nav-icon"></i>
        <span>BMI</span>
      </div>
      <div class="nav-item">
        <i class="nav-icon blood-pressure"></i>
        <span>血压</span>
      </div>
      <div class="nav-item">
        <i class="nav-icon blood-sugar"></i>
        <span>血糖</span>
      </div>
      <div class="nav-item">
        <i class="nav-icon blood-fat"></i>
        <span>血脂</span>
      </div>
      <div class="nav-item">
        <i class="nav-icon hemoglobin"></i>
        <span>血红蛋白</span>
      </div>
      
      <div class="sidebar-divider"></div>
      
      <div class="sidebar-title">辅检</div>
      <div class="nav-item">
        <i class="nav-icon ecg"></i>
        <span>心电图</span>
      </div>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="content-area">
      <!-- 监测趋势部分 -->
      <div class="trend-section">
        <div class="section-header">
          <h3>监测趋势</h3>
        </div>
        
        <!-- 时间筛选器 -->
        <div class="time-filter">
          <button 
            v-for="range in ['近1周', '近2周', '近30天', '指定日期']" 
            :key="range"
            class="time-btn"
            :class="{ active: activeTimeRange === range }"
            @click="handleTimeRangeClick(range)"
          >
            {{ range }}
          </button>
          
          <input 
            type="date" 
            class="date-input" 
            :value="startDate"
            @input="handleDateChange('start', $event.target.value)"
            :disabled="!isDateRangeActive"
          >
          <span>~</span>
          <input 
            type="date" 
            class="date-input" 
            :value="endDate"
            @input="handleDateChange('end', $event.target.value)"
            :disabled="!isDateRangeActive"
          >
          <button 
            class="query-btn" 
            @click="handleQuery"
            :disabled="!isDateRangeActive || !startDate || !endDate"
          >
            查询
          </button>
        </div>
        
        <!-- 趋势图表 -->
        <div class="chart-container">
          <svg width="100%" height="300" viewBox="0 0 1200 300">
            <!-- Y轴刻度 -->
            <text x="20" y="40" font-size="12" fill="#666" text-anchor="end">150</text>
            <text x="20" y="90" font-size="12" fill="#666" text-anchor="end">120</text>
            <text x="20" y="140" font-size="12" fill="#666" text-anchor="end">90</text>
            <text x="20" y="190" font-size="12" fill="#666" text-anchor="end">60</text>
            <text x="20" y="240" font-size="12" fill="#666" text-anchor="end">30</text>
            <text x="20" y="290" font-size="12" fill="#666" text-anchor="end">0</text>
            
            <!-- X轴刻度 - 动态生成 -->
            <text 
              v-for="(date, index) in chartData.dates" 
              :key="`date-${index}`"
              :x="60 + index * 100" 
              y="290" 
              font-size="12" 
              fill="#666" 
              text-anchor="middle"
            >
              {{ date }}
            </text>
            
            <!-- 网格线 -->
            <line x1="40" y1="40" x2="1260" y2="40" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2" />
            <line x1="40" y1="90" x2="1260" y2="90" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2" />
            <line x1="40" y1="140" x2="1260" y2="140" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2" />
            <line x1="40" y1="190" x2="1260" y2="190" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2" />
            <line x1="40" y1="240" x2="1260" y2="240" stroke="#e0e0e0" stroke-width="1" stroke-dasharray="2" />
            <line x1="40" y1="290" x2="1260" y2="290" stroke="#e0e0e0" stroke-width="1" />
            <line x1="40" y1="40" x2="40" y2="290" stroke="#e0e0e0" stroke-width="1" />
            
            <!-- 收缩压趋势线 - 动态生成 -->
            <path 
              :d="generatePathData(chartData.systolicData)" 
              stroke="#52c41a" 
              stroke-width="2" 
              fill="none" 
            />
            
            <!-- 舒张压趋势线 - 动态生成 -->
            <path 
              :d="generatePathData(chartData.diastolicData)" 
              stroke="#1890ff" 
              stroke-width="2" 
              fill="none" 
            />
            
            <!-- 收缩压数据点 - 动态生成 -->
            <circle 
              v-for="(value, index) in chartData.systolicData" 
              :key="`systolic-${index}`"
              :cx="60 + index * 100" 
              :cy="value" 
              r="4" 
              fill="#52c41a" 
            />
            
            <!-- 舒张压数据点 - 动态生成 -->
            <circle 
              v-for="(value, index) in chartData.diastolicData" 
              :key="`diastolic-${index}`"
              :cx="60 + index * 100" 
              :cy="value" 
              r="4" 
              fill="#1890ff" 
            />
          </svg>
          
          <!-- 图例 -->
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-color green"></span>
              <span>收缩压</span>
            </div>
            <div class="legend-item">
              <span class="legend-color blue"></span>
              <span>舒张压</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 监测记录部分 -->
      <div class="records-section">
        <div class="section-header">
          <h3>监测记录</h3>
        </div>
        
        <!-- 记录表格 -->
        <div class="records-table-container">
          <table class="records-table">
            <thead>
              <tr>
                <th>测量时间</th>
                <th>收缩压</th>
                <th>舒张压</th>
                <th>脉搏</th>
                <th>测量方式</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(record, index) in querydata" :key="index">
                <td>{{ moment(record.measureTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
                <td>{{ record.contraction }}</td>
                <td>{{ record.diastole }}</td>
                <td>{{ record.pulse }}</td>
                <td>{{ record.method }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Read } from '@/Http/Axios';
import { onMounted, reactive, ref } from 'vue';
import moment from 'moment';

// 时间筛选状态
const activeTimeRange = ref('近30天');
const startDate = ref('');
const endDate = ref('');
const isDateRangeActive = ref(false);

// 图表数据状态
const chartData = reactive({
  systolicData: [90, 80, 85, 100, 80, 85, 85, 90, 75, 80, 90, 60, 75],
  diastolicData: [190, 180, 175, 175, 150, 170, 190, 180, 175, 150, 160, 180, 175],
  dates: ['2-20', '2-21', '2-22', '2-23', '2-24', '2-25', '2-26', '2-27', '2-28', '3-01', '3-02', '3-03', '3-04']
});

// 模拟监测记录数据
const recordsData = reactive([
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
  { time: '2023-02-03 08:10:11', systolic: '143', diastolic: '98', pulse: '81', method: '居家' },
]);

const querydata:any = ref([]);

const getmonitoring = () =>{
    Read.get("http://localhost:5108/api/Manager/HealthMonitoringList")
    .then(res=>{
        querydata.value = res.data.data;
    })
}

onMounted(()=>{
  getmonitoring()
})

// 处理时间范围选择
const handleTimeRangeClick = (range: string) => {
  activeTimeRange.value = range;
  isDateRangeActive.value = range === '指定日期';
  
  // 模拟根据不同时间范围获取数据
  if (range === '近1周') {
    updateChartDataForRecentDays(7);
  } else if (range === '近2周') {
    updateChartDataForRecentDays(14);
  } else if (range === '近30天') {
    updateChartDataForRecentDays(30);
  }
  
  console.log(`选择了时间范围: ${range}`);
};

// 处理查询按钮点击
const handleQuery = () => {
  if (isDateRangeActive.value && startDate.value && endDate.value) {
    console.log(`查询指定日期范围: ${startDate.value} 至 ${endDate.value}`);
    // 这里可以调用API获取指定日期范围的数据
    // 模拟API调用后的图表数据更新
    simulateDataQuery(startDate.value, endDate.value);
  }
};

// 模拟根据最近N天更新图表数据
const updateChartDataForRecentDays = (days: number) => {
  // 模拟数据更新逻辑，实际项目中应从API获取
  const newSystolicData = [];
  const newDiastolicData = [];
  const newDates = [];
  
  // 根据天数生成对应的模拟数据
  const baseDate = new Date();
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(baseDate);
    date.setDate(date.getDate() - i);
    const month = date.getMonth() + 1;
    const day = date.getDate();
    newDates.push(`${month}-${day}`);
    
    // 生成模拟的血压数据
    newSystolicData.push(Math.floor(Math.random() * 30) + 70); // 70-100的随机数
    newDiastolicData.push(Math.floor(Math.random() * 40) + 150); // 150-190的随机数
  }
  
  // 更新图表数据
  chartData.systolicData = newSystolicData;
  chartData.diastolicData = newDiastolicData;
  chartData.dates = newDates;
};

// 模拟指定日期范围的数据查询
const simulateDataQuery = (start: string, end: string) => {
  // 实际项目中应根据start和end调用API
  console.log('执行数据查询逻辑');
  
  // 模拟延迟更新数据
  setTimeout(() => {
    // 这里可以添加实际的数据更新逻辑
    console.log('数据查询完成，图表已更新');
  }, 500);
};

// 处理日期输入变化
const handleDateChange = (type: 'start' | 'end', value: string) => {
  if (type === 'start') {
    startDate.value = value;
  } else {
    endDate.value = value;
  }
};

// 生成SVG路径数据
const generatePathData = (data: number[]) => {
  if (!data || data.length === 0) return '';
  
  // 构建path的d属性，从第一个数据点开始
  let path = `M60,${data[0]}`;
  
  // 连接后续的数据点
  for (let i = 1; i < data.length; i++) {
    path += ` L${60 + i * 100},${data[i]}`;
  }
  
  return path;
};
</script>

<style scoped>
/* 全局容器 */
.health-monitoring-container {
  display: flex;
  height: 100vh;
  background-color: #f0f2f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 左侧导航栏 */
.sidebar {
  width: 200px;
  background-color: #ffffff;
  border-right: 1px solid #e8e8e8;
  padding: 20px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
  padding: 0 20px 10px;
  font-size: 14px;
  color: #999;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #333;
  font-size: 14px;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: #f0f9ff;
  color: #1890ff;
}

.nav-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-left-color: #1890ff;
  font-weight: 600;
}

.nav-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-color: #d9d9d9;
  border-radius: 4px;
}

.nav-icon.blood-pressure {
  background-color: #1890ff;
}

.nav-icon.blood-sugar {
  background-color: #ff4d4f;
}

.nav-icon.blood-fat {
  background-color: #faad14;
}

.nav-icon.hemoglobin {
  background-color: #52c41a;
}

.nav-icon.ecg {
  background-color: #722ed1;
}

.sidebar-divider {
  height: 1px;
  background-color: #e8e8e8;
  margin: 20px 0;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.section-header {
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 监测趋势部分 */
.trend-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 时间筛选器 */
.time-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.time-btn {
  padding: 6px 16px;
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.time-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.time-btn.active {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #ffffff;
}

.date-input {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  width: 120px;
}

.date-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.query-btn {
  padding: 6px 16px;
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.query-btn:hover {
  background-color: #40a9ff;
}

/* 图表容器 */
.chart-container {
  position: relative;
  height: 350px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.green {
  background-color: #52c41a;
}

.legend-color.blue {
  background-color: #1890ff;
}

/* 监测记录部分 */
.records-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.records-table-container {
  overflow-y: auto;
  max-height: 400px;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.records-table th {
  background-color: #fafafa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 1;
}

.records-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #666;
}

.records-table tr:hover {
  background-color: #f5f5f5;
}

/* 滚动条样式 */
.records-table-container::-webkit-scrollbar {
  width: 6px;
}

.records-table-container::-webkit-scrollbar-thumb {
  background-color: #91d5ff;
  border-radius: 3px;
}

.records-table-container::-webkit-scrollbar-track {
  background-color: #e6f7ff;
}

.content-area::-webkit-scrollbar {
  width: 8px;
}

.content-area::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

.content-area::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}
</style>